<template>
  <div class="common_page_inBox">
    <div>
      <el-form :inline="true" label-width>
        <el-form-item label="产品名称">
          <el-input size="mini" v-model="searchForm.name"></el-input>
        </el-form-item>

        <el-form-item label="订单编号">
          <el-input size="mini" v-model="searchForm.orderId"></el-input>
        </el-form-item>

        <el-form-item label="时间">
          <el-col :span="10">
            <el-date-picker
              size="mini"
              type="date"
              placeholder="开始时间"
              v-model="searchForm.time_start"
              style="width: 100%;"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="1">-</el-col>
          <el-col :span="10">
            <el-date-picker
              size="mini"
              type="date"
              placeholder="结束时间"
              v-model="searchForm.time_end"
              style="width: 100%;"
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <!-- <el-form-item>
          <el-button type="primary" class="search_btn subBtn">搜索</el-button>
        </el-form-item>-->
      </el-form>
    </div>

    <div class="order_list">
      <div class="order_toggle clearfix">
        <p class="cur fl">全部订单</p>
        <p class="fl">待支付</p>
        <p class="fl">施工中</p>
        <p class="fl">待评价</p>
      </div>

      <div class="order_body">
        <el-row class="order_body_title">
          <el-col :span="10">产品名称</el-col>
          <el-col :span="2">价格</el-col>
          <el-col :span="2">支付定金</el-col>
          <el-col :span="2">数量</el-col>
          <el-col :span="2">支付合计</el-col>
          <el-col :span="3">订单状态</el-col>
          <el-col :span="3">操作</el-col>
        </el-row>

        <div class="order_body_list">
          <el-row class="order_list_top">
            <el-col :span="4">2018-11-03</el-col>
            <el-col :span="7">订单编号：SSdSdsaddqwdqAS122</el-col>
            <el-col :span="4">极简筑成</el-col>
            <el-col :span="4">
              <img src="../../../static/img/icon_contact.png" alt>
            </el-col>
          </el-row>
          <el-row class="order_list_bottom" align="middle">
            <el-col :span="10" class="clearfix">
              <el-row style="width: 100%;">
                <el-col :span="8">
                  <img src="../../../static/img/order_img.jpg" alt>
                </el-col>
                <el-col :span="15">
                  <span>建筑名称</span>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="2">
              <span>9999</span>
            </el-col>
            <el-col :span="2">9999</el-col>
            <el-col :span="2">2</el-col>
            <el-col :span="2">9999</el-col>
            <el-col :span="3">供应商施工</el-col>
            <el-col :span="3">
              <div class="operion" style="display: inline-block;height: auto;">
                <p>订单详情</p>
                <p>查看项目进度</p>
                <p>确认验收</p>
                <!-- <p>去支付</p> -->
                <!-- <p>取消订单</p> -->
                <!-- <p>评价</p> -->
              </div>
            </el-col>
          </el-row>
        </div>

        <div style="text-align: center;margin: 20px 0;">
          <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchForm: {
        name: "",
        orderId: "",
        time_start: "",
        time_end: ""
      }
    };
  }
};
</script>
<style lang="scss" scoped>
@import "../../../static/jyj_index.scss";
.common_page_inBox {
  width: 980px;
  margin: 50px auto;
}
.order_list {
  .order_toggle {
    p {
      float: left;
      width: 90px;
      cursor: pointer;
      line-height: 16px;
      text-align: center;
      border-right: 1px solid #ccc;
      &:last-child {
        border-right: 0;
      }
      &.cur,
      &:hover {
        color: $orange;
      }
    }
  }
}
.order_body_title {
  color: $white;
  line-height: 32px;
  padding-left: 20px;
  margin: 30px 0 20px 0;
  background-color: #ef9520;
}
.order_body_list {
  .order_list_top {
    line-height: 32px;
    padding-left: 20px;
    background-color: #fdf4e8;
  }
  .order_list_bottom {
    height: 106px;
    padding-left: 20px;
    div {
      height: 100%;
      display: flex;
      align-items: center;
      .operion {
        p {
          color: #ef9520;
        }
      }
    }
    .order_list_img {
      margin: 20px 0;
    }
  }
}
</style>
